<template>
	<view class="main-container">
		<HeaderBar title="好客之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="swiper-container">
			<!-- 顶部图层动画 -->
				<image class="clod-image1"
				src="http://img.abatour.com/2025-05-06/图层 809_1746516701560.png" mode="widthFix" alt=""/>
				<image class="clod-image2"
				src="http://img.abatour.com/2025-05-06/图层 810_1746516896325.png" mode="widthFix" alt=""/>
				<image class="clod-image3"
				src="http://img.abatour.com/2025-05-06/图层 811_1746516931917.png" mode="widthFix" alt=""/>
				
				<image class="title-img"
				src="http://img.abatour.com/2025-05-04/笑容比酥油茶更醇厚的地方@2x_1746328375641.png" mode="widthFix" alt=""/>
		</view>
		<view class="hospitable-content-box">
			
	<view class="hosoitable_content">
		
		<view class="news-title-container">
		  <image
			  class="img"
			  src="http://img.abatour.com/2025-04-30/xiaoxi@2x_1746005776127.png"
			  lazy-load
		  ></image>
		  <view class="more-container" @click="gotoAllNews">
			<text>全部</text>
			<!-- <view class="more-icon-container"> -->
			  <wd-icon name="chevron-right" size="16px" color="#2B2B24"></wd-icon>
			<!-- </view> -->
		  </view>
		</view>
		<!-- 轮播新闻 -->
		<view class="news-container" style="margin-top: 20rpx;">
			<wd-tabs v-model="tab" swipeable animated lineWidth="0" v-if="newsDataList.length" lineHeight="0" 	>
			  <block  v-for="(item,index) in newsDataList" :key="index">
				<wd-tab title="">
				  <view  class="news-item-box" @click="gotoNewsDetail(item)">
					 <image class="item-left-image" :src="item.headImage" mode="aspectFill"></image>
					 <view class="item-right-box">
						 <view class="news-title-box flex-col">
							<text class="news-title">{{item.title}}</text>
							<text class="news-sub-title">{{item.subTitle}}</text>
						 </view>
						 <view class="news-detail">
							<text>查看更多</text>
							  <wd-icon name="chevron-right" size="14px" color="#2B2B24"></wd-icon>
						 </view>
					 </view>
				  </view>
				</wd-tab>
			  </block>
			</wd-tabs>
				<view v-else class="news-item-box">
					<view class="noDataBox">
						<image class="noData" src="http://img.abatour.com/2025-05-07/zanwushuju (1)@2x_1746600259125.png" mode="widthFix"></image>
						<text>暂无资讯</text>
					</view>
				</view>
		</view>
		<!-- 游玩助手 -->
		  <image
			  class="play-title-img"
			  src="http://img.abatour.com/2025-05-04/xiaozhushou@2x_1746351345730.png"
			  lazy-load
		  ></image>
		<view class="banner-container" >
		  <view
		      class="banner-item"
		      v-for="(item,index) in playHelperList" :key="index"
		      @click="handleNavToParty(item)">
			  <view class="banner-img-container">
				<image class="banner-img" :src="item.iconImage" alt=""></image>
			  </view>
		    <span class="banner-title">{{item.title}}</span>
		  </view>
		  </view> 
		  <!-- 游客反馈 -->
		  <image
			  class="play-title-img"
			  src="http://img.abatour.com/2025-05-04/fankui_2@2x_1746351550646.png"
			  lazy-load
		  ></image>
		<view class="banner-container" >
		  <view
		      class="banner-item"
		      v-for="(item,index) in callbackList" :key="index"
			  @click="gotoCallBack"
		     >
			  <view class="banner-img-container">
				<image class="banner-img" :src="item.iconImage" alt=""></image>
			  </view>
		    <span class="banner-title">{{item.title}}</span>
		  </view>
		  </view>
		<wd-gap safe-area-bottom height="80"></wd-gap>
	</view>
	
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import VlogList from "@/components/Waterfull/index.vue";
	import{
		getDataList
	} from '../../utils/commonMethods'
	const newsDataList= ref ([])
	const playHelperList = ref([
		{
			title:"高原服务",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/yangqishebei@2x_1746351704282.png"
		},
		{
			title:"停车场",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/阿坝一机游定稿.cdr_271876@2x_1746351752894.png"
		},
		{
			title:"服务区",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/fwq_1746352018989.png"
		},
		{
			title:"卫生间",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/huabanfuben@2x_1746351843207.png"
		},
		{
			title:"人流信息",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/a-27-02dongtaishangbao-renliuxinxi@2x_1746351876551.png"
		},
	]);
	const callbackList = ref([
		{
			title:"我要反馈",
			url:"",
			iconImage:"http://img.abatour.com/2025-05-04/阿坝一机游定稿.cdr_271884@2x_1746351915094.png"
		},
		
	]);
	const tab = ref(0)
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const query={
		userVlog:{
			type:1
		},
		query:{
			pageNo:1,
			pageSize:20
		}
	}

	/**
	 * 点击全部，查看列表
	*/
	const gotoAllNews = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/newsList"
		})
	};
	/**
	 * 去反馈
	*/
	const gotoCallBack = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/callbackInput"
		})
	};
	/**
	 * 点击某项新闻查看
	*/
	const gotoNewsDetail = (item) => {
			if(clickLoading.value) return
			clickLoading.value=true
			uni.navigateTo({
				url:"/fiveMajorSubPack/pages/hospitable/newsDetail?id="+item.id+"&title=新闻资讯",
				complete(){
					clickLoading.value=false
				}
			})
		};
	onPageScroll((e) => {
		if (e.scrollTop > 110) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})

	onReachBottom(() => {
	})
	onLoad(async()=>{
		const data=await getDataList(query)
		if(!data) return newsDataList.value=[]
		newsDataList.value=data.result||[]
	})
</script>

<style lang="scss" scoped>
	::v-deep .wd-tabs__nav{
		height: 0px !important;
	}
	.news-title-container {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  image {
	    width: 190rpx;
	    height: 48rpx;
	  }
	  .more-container {
		color:#2B2B24;
	    display: flex;
	    align-items: center;
	    text {
	      font-size: 30rpx;
	    }
	  }
	
	}
	
	.more-icon-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  width: 25rpx;
	  height: 25rpx;
	  margin-left: 13rpx;
	  text-align: center;
	}
	.hospitable-content-box{
		position: absolute;
		width: 100%;
		top:796rpx
	}
	.hosoitable_content{
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 50rpx 28rpx;
		background-color: #fff;
	}
	.main-container {
		min-height: 100vh;
		background-color: #fff;
		overflow-x:hidden;

		:deep(.swiper-container) {
			width: 100%;
			height: 856rpx;
			// margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
			background-image: url('http://img.abatour.com/2025-04-30/fiveMajor_hospitable_1_271609@2x_1746005385177.png');
			background-position: center center;
			background-size: 100% 100%;
		}
		.title-img{
			z-index: 100;
			position: absolute;
			top: 240rpx;
			left:110rpx;
			width: 527rpx;
		}
		.clod-image1{
			position: absolute;
			top: 408rpx;
			left: 0rpx;
			width: 390rpx;
			// animation: codeMove 15s 1s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			 animation: 
			    horizontalMove 30s linear infinite,
			    verticalFloat 4s ease-in-out infinite alternate;	
		}
		.clod-image2{
			position: absolute;
			top: 198rpx;
			left: 160rpx;
			width: 331rpx;
			// animation: codeMove2 18s 2s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			  animation: 
			    horizontalMove 40s linear infinite,
			    verticalFloat 5s ease-in-out infinite alternate;
		}
		.clod-image3{
			position: absolute;
			top: 290rpx;
			left: 440rpx;
			width: 370rpx;
			// animation: codeMove 20s 0.3s cubic-bezier(0.4, 0, 0.3, 1) infinite;
			animation: 
			    horizontalMoveReverse 35s linear infinite,
			    verticalFloat 3.5s ease-in-out infinite alternate;
		}
		@keyframes horizontalMove {
		  from { transform: translateX(-100%); }
		  to { transform: translateX(100vw); }
		}
		
		@keyframes horizontalMoveReverse {
		  from { transform: translateX(100vw); }
		  to { transform: translateX(-100%); }
		}
		
		@keyframes verticalFloat {
		  from { transform: translateY(-10px); }
		  to { transform: translateY(10px); }
		}
		.hospitable-restaurant-header {
			.restaurant-logo {
				width: 190.97rpx;
				height: 4rpx;
			}
		}

		.banner-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.banner-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.banner-img-container{
					background-color: #EEEFE7;
					width: 125rpx;
					height: 125rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.banner-img {
						width: 51rpx;
						height: 51rpx;
						background-size: cover;
					}
				}

				.banner-title {
					font-size: 26rpx;
					font-weight: bold;
					color: #2B2B24;
					margin-top: 26rpx;
				}
			}

			:deep(.wd-skeleton__content) {
				width: 100% !important;
			}

		}
		.news-container {
			width: 100%;
			height: 208rpx;
			margin-top: 20rpx;
			.news-item-box {
				background-color: #EEEFE7;
				position: relative;
				width: 100%;
				height: 208rpx;
				margin-right: 28rpx;
				display: flex;
				.noDataBox{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color:#777777;
					font-size: 24rpx;
					.noData{
						width:128rpx;
						margin-bottom: 20rpx;
					}
				}

				.item-left-image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 10rpx;
				}
				.item-right-box{
					width: calc(100% - 208rpx);
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					color:#2B2B24;
					font-size: 29rpx;
					justify-content: space-between;
					overflow: hidden;
					.news-title-box{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						text{
							display: block;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.news-title{
						font-weight: bold;
					}
					.news-detail{
						color:#2B2B24;
						display: flex;
						align-items: center;
						text-align: right;
						text {
							width: 100%;
							font-size: 25rpx;
						}
					}
			
				}

				}
	}

		.play-title-img{
			margin: 54rpx 0 35rpx 0;
			width: 190rpx;
			height: 46rpx;
		}
		
	}
</style>